import React, { Component } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import { Layout } from 'antd';
import SiderCustom from './SiderCustom';
import HeaderCustom from './HeaderCustom';
// 管理员
import MIndex from '../index/Index';
import UForm from '../form/Form';
import UserOrders from '../userOrders/Form';
import ManagerOrders from '../adminOrders/Form';
import DataManagement from '../dataManagement';
import DataContent from '../dataManagement/dataContent';
import Notification from '../notification';
import Memorandum from '../memorandum';
import SumBill from '../sumBill';
// 用户
import Order from '../order/Form';
import '../../style/index.less';
import noMatch from './404';

const { Content } = Layout;

export default class App extends Component {
    state = {
        collapsed: localStorage.getItem("mspa_SiderCollapsed") === "true",
    };
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        }, function () {
            localStorage.setItem("mspa_SiderCollapsed", this.state.collapsed);
        });
    };

    componentDidMount() {
        //保存Sider收缩
        if (localStorage.getItem("mspa_SiderCollapsed") === null) {
            localStorage.setItem("mspa_SiderCollapsed", false);
        }
    }

    render() {
        const { collapsed } = this.state;
        const { location } = this.props;
        let name;
        if (localStorage.getItem("mspa_user") === null) {
            return <Redirect to="/login" />
        } else {
            name = location.state === undefined ? JSON.parse(localStorage.getItem("mspa_user")).username : location.state.username;
        }

        return (
            <Layout className="ant-layout-has-sider" style={{ height: '100%' }}>
                <SiderCustom collapsed={collapsed} path={location.pathname} username={name} />
                <Layout>
                    <HeaderCustom collapsed={collapsed} toggle={this.toggle} username={name} />
                    <Content style={{ margin: '0 16px' }}>
                        {/* 为防止不对应的用户通过路径访问到不属于自己的页面 */}
                        {name === 'admin' || name === 'admin_1' ?
                            <Switch>
                                <Route exact path={'/app'} component={MIndex} />
                                <Route exact path={'/app/form'} component={UForm} />
                                <Route exact path={'/app/userOrders/:username'} component={UserOrders} />
                                <Route exact path={'/app/managerOrders/:name'} component={ManagerOrders} />
                                <Route exact path={'/app/dataManagement'} component={DataManagement} />
                                {/* 资料管理内容页 */}
                                <Route exact path={'/app/dataManagement/content'} component={DataContent} />
                                <Route exact path={'/app/notification'} component={Notification} />
                                <Route exact path={'/app/memorandum'} component={Memorandum} />
                                <Route exact path={'/app/sumBill'} component={SumBill} />
                                <Route component={noMatch} />
                            </Switch> :
                            <Switch>
                                <Route exact path={'/app/order'} component={Order} />
                                <Route component={noMatch} />
                            </Switch>}
                    </Content>
                </Layout>
            </Layout>
        );
    }
}
